<!--suppress ALL -->
<template>
  <div id="app">
    <el-form ref="form" :model="form" label-width="100px" align="left">
      <el-form-item label="商品名称">
        {{ form.name }}
      </el-form-item>
      <el-form-item label="原价">
        <s>{{ form.price }}元</s>
      </el-form-item>
      <el-form-item label="秒杀价">
        <span style="color: red">{{ form.seckill_price }}元</span>
      </el-form-item>
      <el-form-item label="活动倒计时">
        <span style="color: red; font-size: 52px">
          <span v-if="form.count_down > 0">{{ form.count_down }}S</span>
          <span v-else>{{ tip }}</span>
        </span>
      </el-form-item>
      <el-form-item label="手机号">
        <el-col :span="8">
          <el-input v-model="form.phone_number"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item>
        <el-button id="sbm" type="primary" @click="onSubmit" v-bind:disabled="form.count_down > 0">立即抢购</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Axios from 'axios'

export default {
  name: 'App',
  data() {
    return {
      form: {
        id: '',
        name: 'xxx商品',
        price: 'xxx价格',
        seckill_price: 'xxx秒杀价',
        count_down: '10',
        phone_number: ''
      },
      tip: '开始抢购！！！'
    }
  },
  methods: {
    onSubmit() {
      console.log("点击提交/秒杀")

      let _this = this
      Axios
          .post(
              "http://127.0.0.1:8082/seckill",
              {
                goodsId: _this.form.id,
                phone: _this.form.phone_number
              }
          )
          .then((data) => {
            console.log(data)

            let res = data.data
            if (res.code === 1) {
              this.$notify({
                title: '成功',
                message: res.msg,
                type: 'success'
              });
            } else {
              this.$notify({
                title: '警告',
                message: res.msg,
                type: 'warning'
              });
            }
          })
    }
  },
  created() {
    let _this = this

    // 当用户打开页面时就去请求该详情页商品的信息
    Axios
        .get("http://127.0.0.1:8082/details/1")
        .then((data) => {
          console.log(data)
          let info = data.data
          let form = _this.form;
          form.id = info.id
          form.name = info.name
          form.price = info.price
          // noinspection JSUnresolvedVariable
          form.seckill_price = info.seckillPrice
          let startTime = new Date(info.startTime).getTime()
          let nowTime = new Date().getTime();
          console.log(startTime - nowTime)
          form.count_down = Math.round((startTime - nowTime) / 1000)
        })

    let timer = setInterval(() => {
      if (_this.form.count_down > 0) {
        _this.form.count_down -= 1
      } else {
        clearInterval(timer)

        // 倒计时结束 立即抢购！！！
        _this.onSubmit()
      }
    }, 1000);
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /*margin-top: 60px;*/
}
</style>
